<meta charset="UTF-8">

<style>
  * {
    padding: 0;
    margin: 0
  }

  html,
  body {
    height: 100%;
    background-color: black;
  }

  .time {
    width: 200px;
    height: 50px;
    font-size: 40px;
    position: fixed;
    background-color: red;
    text-align: center;
  }

  p {
    width: 200px;
    height: 50px;
    font-size: 40px;
    position: fixed;
    right: 0;
    background-color: red;
    text-align: center;
  }

  .start {
    width: 150px;
    height: 60px;
    position: fixed;
    background-color: green;
    font-size: 30px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    line-height: 60px;
    text-align: center;
  }

  .wsc {
    width: 70px;
    height: 70px;
    position: fixed;
    bottom: 0px;
    left: 0px;
  }

  .hotdog {
    width: 20px;
    height: 50px;
    position: fixed;
    top: 200px;
    left: 10px;
  }

  .guanjun {
    width: 40px;
    height: 70px;
    position: fixed;
    top: 100px;
    left: 80px;
  }
</style>
<div class="start">开始游戏</div>
<div class="time">60s</div>
<p class="p">0分</p>
<img class="wsc" src="./img/wsc.jpg" alt="王思聪">
<script>
  function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
  }
  var wscObj = document.querySelector('.wsc')
  var wscX
  var wscY = wscObj.offsetTop
  var pobj = document.querySelector('.p')
  var num = 60
  var startobj = document.querySelector('.start')
  var timetobj = document.querySelector('.time')
  var maxTop
  var i = 0
  startobj.onclick = function () {
      startobj.style.display = 'none'
      s = setInterval(function () {
        num--
        if (num < 0) {
          clearInterval(t)
          alert('游戏结束')
        }
        timetobj.innerText = num + 's'
        img = document.createElement('img')
        var who = random(0, 9)
        if ([6, 8].includes(who)) {
          img.src = './img/guanjun.jpg'
          img.className = 'food guanjun'
          img.setAttribute('type', 'guanjun')
        } else {
          img.src = './img/hotdog.jpg'
          img.className = 'food hotdog'
          img.setAttribute('type', 'hotdog')
        }
        var left = random(0, (window.window.innerWidth || document.documentElement.clientWidth) - img.offsetWidth)
        img.style.left = left + 'px'
        img.style.top = 0 + 'px'
        img.style.position = 'absolute'
        document.body.appendChild(img)
      }, 1000)

      document.onmousemove = function (evt) {
        var e = evt || window.event

        var left = e.clientX - wscObj.offsetWidth / 2
        let maxLeft = (window.innerWidth || document.documentElement.clientWidth) - wscObj.offsetWidth
        if (left < 0) {
          left = 0
        }
        if (left >= maxLeft) {
          left = maxLeft
        }
        wscObj.style.left = left + 'px'
        wscX = left
      }

      t = setInterval(function () {
            var food = document.querySelectorAll('img')
            food.forEach(function (item) {
              var top = parseInt(item.style.top) + 2
              maxTop = (window.height || document.documentElement.clientHeight) - item.offsetHeight
              if (top >= maxTop) {
                document.body.removeChild(item)
              } else {
                item.style.top = top + 'px'
              }
              if (parseInt(item.style.top) + item.offsetWidth > wscY && parseInt(item.style.left) > wscX &&
                parseInt(item.style.left) < (wscX + wscObj.offsetWidth)) {
                if (item.getAttribute('type') === 'hotdog') {
                  i += 1
                }
                if (item.getAttribute('type') === 'guanjun') {
                  i += 5
                }
                pobj.innerText = i + '分'
                document.body.removeChild(item)

              }
            })
          }),3000}
</script>